<template>
  <div class="background">
    <div class="picture"><myvideo /></div>
    <div class="mytable">
      <mytable :propdata="columnsdata" :proptabledata="tabledata" />
    </div>
  </div>
</template>
<script>
import mytable from "@/components/table";
import myvideo from "./components/video.vue";
export default {
  components: {
    mytable,
  },
  data() {
    return {
      columnsdata: {
        Data: {
          Grid: {
            Menu_Id: "39fced04-f3c1-dfd0-a4ac-c6c5eb11829e",
            Code: "plm_problem_getList",
            Display_Name: "问题整改列表",
            Is_Select: true,
            Is_Row_Number: false,
            Is_Page: true,
            Is_Filter: true,
            Is_Summary: false,
            Is_Edit: false,
            Is_Auto_Width: false,
            Width: 0,
            Height: "70",
            Data_Url: "/PLM/QSQuestion/GetList",
            Table_Name: "",
            Is_Sub_Grid: false,
            Sub_Grid_Code: "",
            Sort_Column: "",
            Sort_Type: "",
            Row_Number: "0",
            Remark: "",
            Parent_Id: null,
            Id: "85c2f981-9c06-4224-aba6-f560ed1885d5",
            Create_UserId: "39f9e764-938b-7d56-f6e3-ba4feb118238",
            Modify_UserId: null,
            Create_UserName: "管理员",
            Modify_UserName: null,
            Create_Date: "2021-10-28T10:54:29.307",
            Modify_Date: null,
            Is_Deleted: false,
            AutoIncrm_Id: 203,
          },
          ColumnList: [
            {
              Grid_Id: "g1",
              Code: "Name",
              Display_Name: "名字",
              Type: "",
              Filter_Type: "",
              Range: "",
              Sort: 0,
              Is_Display: true,
              Is_Filter: false,
              Is_Edit: true,
              Is_Must_Input: true,
              Is_Primary_Key: false,
              Is_Frozen: false,
              Width: 0,
              Align: "center",
              Is_Formatter: false,
              Formatter: "",
              Style: "",
              Dropdown_Name: "",
              Dropdown_Parameter: "",
              Is_Sort: true,
              Sort_Type: "",
              Proportion: 1,
              Digit_Number: 0,
              Remark: "",
              Custom_Type: null,
              Alias: null,
              Id: "123",
              Is_Deleted: false,
              AutoIncrm_Id: 2210,
            },
            {
              Grid_Id: "g2",
              Code: "Gender",
              Display_Name: "性别",
              Type: "",
              Filter_Type: "",
              Range: "",
              Sort: 0,
              Is_Display: true,
              Is_Filter: false,
              Is_Edit: true,
              Is_Must_Input: true,
              Is_Primary_Key: false,
              Is_Frozen: false,
              Width: 0,
              Align: "center",
              Is_Formatter: false,
              Formatter: "",
              Style:
                '{"type": "tag","tagdata": [{"label": "雌性","value":0, "color": "danger" },{"label": "雄性","value":1, "color": "primary" }]}',
              Dropdown_Name: "",
              Dropdown_Parameter: "",
              Is_Sort: true,
              Sort_Type: "",
              Proportion: 1,
              Digit_Number: 0,
              Remark: "",
              Custom_Type: null,
              Alias: null,
              Id: "49a93525-8714-432e-bdf2-a6595a9d601e",
              Create_UserId: "39f9e764-938b-7d56-f6e3-ba4feb118238",
              Modify_UserId: "39f9e764-938b-7d56-f6e3-ba4feb118238",
              Create_UserName: "管理员",
              Modify_UserName: "管理员",
              Create_Date: "2021-10-28T11:13:45.834",
              Modify_Date: "2021-12-22T15:47:34.32323",
              Is_Deleted: false,
              AutoIncrm_Id: 2163,
            },
            {
              Grid_Id: "g3",
              Code: "Type",
              Display_Name: "品种",
              Type: "",
              Filter_Type: "",
              Range: "",
              Sort: 1,
              Is_Display: true,
              Is_Filter: false,
              Is_Edit: true,
              Is_Must_Input: true,
              Is_Primary_Key: false,
              Is_Frozen: false,
              Width: 0,
              Align: "center",
              Is_Formatter: false,
              Formatter: "",
              Style: "",
              Dropdown_Name: "",
              Dropdown_Parameter: "",
              Is_Sort: true,
              Sort_Type: "",
              Proportion: 1,
              Digit_Number: 0,
              Remark: "",
              Custom_Type: null,
              Alias: null,
              Id: "2f0f5261-1d2b-4ab6-80c1-538ce2b93e3f",
              Create_UserId: "39f9e764-938b-7d56-f6e3-ba4feb118238",
              Modify_UserId: "39f9e764-938b-7d56-f6e3-ba4feb118238",
              Create_UserName: "管理员",
              Modify_UserName: "管理员",
              Create_Date: "2021-10-28T11:00:35.391",
              Modify_Date: "2021-10-28T11:01:05.205",
              Is_Deleted: false,
              AutoIncrm_Id: 2210,
            },
            {
              Grid_Id: "g4",
              Code: "img",
              Display_Name: "照片",
              Type: "",
              Filter_Type: "",
              Range: "",
              Sort: 1,
              Is_Display: true,
              Is_Filter: false,
              Is_Edit: true,
              Is_Must_Input: true,
              Is_Primary_Key: false,
              Is_Frozen: false,
              Width: 0,
              Align: "center",
              Is_Formatter: false,
              Formatter: "",
              Style: '{"type":"image"}',
              Dropdown_Name: "",
              Dropdown_Parameter: "",
              Is_Sort: true,
              Sort_Type: "",
              Proportion: 1,
              Digit_Number: 0,
              Remark: "",
              Custom_Type: null,
              Alias: null,
              Id: "26d6d20f-f647-4f77-9a9f-053f4dda884f",
              Create_UserId: "39f9e764-938b-7d56-f6e3-ba4feb118238",
              Modify_UserId: "39f9e764-938b-7d56-f6e3-ba4feb118238",
              Create_UserName: "管理员",
              Modify_UserName: "管理员",
              Create_Date: "2021-10-29T13:27:44.779",
              Modify_Date: "2021-10-29T13:37:29.746",
              Is_Deleted: false,
              AutoIncrm_Id: 2221,
            },
            {
              Grid_Id: "g5",
              Code: "weight",
              Display_Name: "体重",
              Type: "",
              Filter_Type: "",
              Range: "",
              Sort: 1,
              Is_Display: true,
              Is_Filter: false,
              Is_Edit: true,
              Is_Must_Input: true,
              Is_Primary_Key: false,
              Is_Frozen: false,
              Width: 0,
              Align: "center",
              Is_Formatter: false,
              Formatter: "",
              Style: '{"type":"special","format":"$$$kg"}',
              Dropdown_Name: "",
              Dropdown_Parameter: "",
              Is_Sort: true,
              Sort_Type: "",
              Proportion: 1,
              Digit_Number: 0,
              Remark: "",
              Custom_Type: null,
              Alias: null,
              Id: "26d6d20f-f647-4f77-9a9f-053f4dda884f",
              Create_UserId: "39f9e764-938b-7d56-f6e3-ba4feb118238",
              Modify_UserId: "39f9e764-938b-7d56-f6e3-ba4feb118238",
              Create_UserName: "管理员",
              Modify_UserName: "管理员",
              Create_Date: "2021-10-29T13:27:44.779",
              Modify_Date: "2021-10-29T13:37:29.746",
              Is_Deleted: false,
              AutoIncrm_Id: 2221,
            },
            {
              Grid_Id: "g6",
              Code: "operate",
              Display_Name: "操作",
              Type: "",
              Filter_Type: "",
              Range: "",
              Sort: 12,
              Is_Display: true,
              Is_Filter: false,
              Is_Edit: true,
              Is_Must_Input: true,
              Is_Primary_Key: false,
              Is_Frozen: true,
              Width: 120,
              Align: "center",
              Is_Formatter: false,
              Formatter: "",
              Style:
                '{ \t"type": "button", \t"buttondata": [{ \t\t"label": "编辑", \t\t"operate": "edit", \t\t"showCondition": "row.row.status==0" \t}, { \t\t"label": "提交", \t\t"operate": "submit", \t\t"showCondition": "row.row.status==0" \t}, { \t\t"label": "查看", \t\t"operate": "view", \t\t"showCondition": "row.row.status!==0" \t}, { \t\t"label": "整改", \t\t"operate": "rectifier", \t\t"showCondition": "row.row.status===1&&row.row.statuscode!==\'FQ\'" \t}, { \t\t"label": "复核", \t\t"operate": "reviewer", \t\t"showCondition": "row.row.status===2&&row.row.statuscode!==\'FQ\'" \t}, { \t\t"label": "撤回草稿", \t\t"operate": "back", \t\t"showCondition": "row.row.status===1&&row.row.statuscode==\'FQ\'&&row.row.type_flag===1" \t}] }',
              Dropdown_Name: "",
              Dropdown_Parameter: "",
              Is_Sort: true,
              Sort_Type: "",
              Proportion: 1,
              Digit_Number: 0,
              Remark: "",
              Custom_Type: null,
              Alias: null,
              Id: "0ffcbfe5-ae94-4cd1-a03d-369119d01903",
              Create_UserId: "39f9e764-938b-7d56-f6e3-ba4feb118238",
              Modify_UserId: "39f9e764-938b-7d56-f6e3-ba4feb118238",
              Create_UserName: "管理员",
              Modify_UserName: "管理员",
              Create_Date: "2021-10-28T11:14:32.334",
              Modify_Date: "2021-10-30T18:22:23.109",
              Is_Deleted: false,
              AutoIncrm_Id: 2164,
            },
          ],
        },
        IsSucceed: true,
        IsNeedData: false,
        Message: null,
        StatusCode: 200,
      },
      tabledata: {
        Data: {
          ParameterJson: null,
          Search: "",
          Page: 1,
          PageSize: 20,
          SortName: "t.Create_Date",
          SortOrder: "DESC",
          TotalCount: 3,
          Data: [
            {
              Id: "a1",
              Name: "包子",
              Gender: 0,
              Type: "奶牛猫",
              img: require("@/assets/picture/baozi1.jpg"),
              weight: "3.7",
              Is_Deleted: false,
              AutoIncrm_Id: 0,
            },
          ],
        },
        IsSucceed: true,
        IsNeedData: false,
        Message: null,
        StatusCode: 200,
      },
    };
  },
};
</script>
<style lang="scss" scoped>
.background {
  background: #fff;
  height: 100%;
  width: 100%;
  position: relative;
}
.picture {
  height: 48%;
  width: 48%;
  position: absolute;
  box-shadow: 0 0 10px #000;
  border-radius: 12px;
  top: 10px;
  left: 10px;
  z-index: 10;
  background: #fff;
  padding: 10px;
  transition: all 1s;
}
.picture:hover {
  z-index: 100;
  top: 50%;
  left: 50%;
  height:70%;
  width:70%;
  transform: translate(-60%, -60%);
}
.mytable {
  height: 48%;
  width: 48%;
  padding: 10px;
  background: #fff;
  box-shadow: 0 0 10px #000;
  border-radius: 12px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 10;
  transition: all 1s;
}
.mytable:hover {
  z-index: 100;
    bottom: 50%;
  right: 50%;
  height:70%;
  width:70%;
  transform: translate(50%, 50%);
}
</style>
